<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8">
    <title>Bootstrap Tree View</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/bootstrap-treeview.css" rel="stylesheet"> 
  </head>
  <body>
    <div class="col-sm-4">
      <!--<h2>Custom Icons</h2> -->
      <div id="treeview" class=""></div>
    </div>

    <script src="./js/jquery-1.8.3.min.js"></script>
  	<script src="./js/bootstrap-treeview.js"></script>
  	<script type="text/javascript">

  		$(function() {

        var defaultData = [
          {
            text: '总队',
            href: '#总队',
            tags: ['4'],
            nodes: [
              {
                text: '1支队',
                href: '#1支队',
                tags: ['2'],
                nodes: [
                  {
                    text: '3级1支队',
                    href: '#3级1支队',
                    tags: ['1'],
					nodes: [
						{
							text: '4级1支队',
							href: '#4级1支队',
							tags: ['1'],
							nodes: [
								{
									text: '5级1支队',
									href: '#5级1支队',
									tags: ['2'],
									nodes: [
										{
											text: '1班',
											href: '#1班',
											tags: ['0']	
										},
										{
											text: '2班',
											href: '#2班',
											tags: ['0']	
										}
									]
								}
							]
						}
					]
                  },
                  {
                    text: '3级2支队',
                    href: '#3级2支队',
                    tags: ['0']
                  }
                ]
              },
              {
                text: '2支队',
                href: '#2支队',
                tags: ['0']
              },
			  {
                text: '3支队',
                href: '#3支队',
                tags: ['0']
              },
			  {
                text: '4支队',
                href: '#4支队',
                tags: ['0']
              },
			  {
                text: '5支队',
                href: '#5支队',
                tags: ['0']
              },
			  {
                text: '6支队',
                href: '#6支队',
                tags: ['0']
              },
			  {
                text: '7支队',
                href: '#7支队',
                tags: ['0']
              },
			  {
                text: '8支队',
                href: '#8支队',
                tags: ['0']
              },
			  {
                text: '9支队',
                href: '#9支队',
                tags: ['0']
              },
			  {
                text: '10支队',
                href: '#10支队',
                tags: ['0']
              }
			  
            ]
          }
        ];

        $('#treeview').treeview({
          color: "#428bca",
          expandIcon: 'glyphicon glyphicon-chevron-right',
          collapseIcon: 'glyphicon glyphicon-chevron-down',
          nodeIcon: 'glyphicon glyphicon-bookmark',
          data: defaultData,
			  onNodeSelected : function(event, data) {     //点击tree的子节点的时候,将该节点的group_id传给yaml文件
					//alert(data.text);
					  
			  },
			  onNodeUnselected: function(event, data) {    //不点击tree的子节点的时候,将该节点的group_id传给yaml文件
					
			  }
        });


  		});
  	</script>
  </body>
</html>
